<template>
  <div>
    <el-table :row-style="rowStyle" :data="tableData" border>
      <el-table-column prop="createUserName" label="用户昵称"></el-table-column>
      <el-table-column prop="createUserPhone" label="微信号码"></el-table-column>
      <el-table-column prop="createUserPhone" label="电话号码"></el-table-column>
      <el-table-column prop="authTime" label="提现时间"></el-table-column>
      <el-table-column prop="cashMoney" label="提现金额"></el-table-column>
      <el-table-column label="提现状态">
        <template
          slot-scope="scope"
        >{{scope.row.isPay === 1 ? '已支付' : scope.row.isPay === 2 ? '未审核' : '驳回'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-check"
            v-if="scope.row.isPay === 2 || scope.row.isPay === 0"
          >通过</el-button>
          <el-button
            @click="noPay(scope.row)"
            type="warning"
            size="mini"
            icon="el-icon-close"
            v-if="scope.row.isPay === 2"
          >驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 40px 450px;"
      :total="page.tatol">
    </el-pagination>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
export default {
  methods: {
    handleClick (row) {
      request({
        url: '/pay/checkCash',
        method: 'post',
        data: {
          id: row.id,
          isCheck: 1
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    noPay (row) {
      request({
        url: '/pay/checkCash',
        method: 'post',
        data: {
          id: row.id,
          isCheck: 0
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getTableData()
    },
    getTableData () {
      request({
        url: '/pay/findCashPage',
        method: 'get',
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.tableData = res.data.data
          this.page.tatol = parseInt(res.data.totalCount)
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    }
  },

  data () {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      }
    }
  },
  created () {
    this.getTableData()
  }
}
</script>

<style>
</style>
